import React, { useRef, useState } from 'react';
import { flushSync } from 'react-dom';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { ModalForm, PageContainer, ProFormText, ProTable, ProFormUploadButton } from '@ant-design/pro-components';
import { Button, message, Image, Popconfirm } from 'antd';
import errorImage from '@/assets/error.png';
import _ from '@/assets/utils';
import MODEL_API from '@/services/model';
import styled from 'styled-components';
const RightStyle = styled.div`
    .ant-pro-table-list-toolbar-right   {
  margin-right: 1100px;
}
`;
const Member = function Member() {
    const columns = [{
        title: '昵称',
        dataIndex: 'nickName',
        width: '20%',
    }, {
        title: "登录名",
        dataIndex: 'loginName',
        width: '20%',
    }, {
        title: '身份状态',
        dataIndex: 'lockedFlag',
        width: '20%',
        render: (_, record) => {
            let {lockedFlag} = record;
            if (lockedFlag===0){
                return <div style={{ color: 'green' }}>正常</div>
            }else{
                return <div style={{ color: 'red' }}>禁用</div>
            }
        }
    }, {
        title: '是否注销',
        dataIndex: 'isDeleted',
        width: '20%',
        render: (_, record) => {
            let {isDeleted,lockedFlag} = record;
            if (lockedFlag===0){
                return <div style={{ color: 'green' }}>正常</div>
            }else{
                return <div style={{ color: 'red' }}>正常</div>
            }
        }
    },{
        title: '注册时间',
        dataIndex: 'createTime',
        with: '20%',
        render: (dom) => {
            if (!dom) return '--';
            return _.formatTime(dom, '{0}-{1}-{2} {3}:{4}:{5}');
        }
    }]  
    const  [selectList, setSelectList] = useState([]),//存批量选中的id
    //   [locked, setLocked] = useState(null),
        tableIns = useRef(); //刷新页面的
/* 表格数据的处理 */
const queryTableData = async ({ pageSize, current}) => {
    let tableData = [],
        total = 0;
    try {
        let { resultCode, data } = await MODEL_API.memberList(current, pageSize);
        if (+resultCode === 200) {
            total = +data.totalCount;
            tableData = data.list;
        }
    } catch (_) { }
    // 不论请求成功还是失败，都让表格进行渲染
    return {
        success: true,
        data: tableData,
        total
    };
};
const nice = async(ids)=>{
    let { resultCode } = await MODEL_API.disable(ids)
    if (+resultCode === 200) {
        message.success('解除成功');
        tableIns.current.reload();
    }
}
const bad = async(ids)=>{
    let { resultCode } = await MODEL_API.unban(ids)
    if (+resultCode === 200) {
        message.success('禁用成功');
        tableIns.current.reload();
    }
}
    return <PageContainer >
        <RightStyle>
<ProTable
            request={queryTableData}
            columns={columns}
            search={false}
            options={{
                density: false,
                reload: false,
                setting: false
            }}
            pagination={{
                pageSize: 10,
                hideOnSinglePage: false,
                showTotal: false,
                showQuickJumper: false,
                showSizeChanger: false
            }}
            toolBarRender={() => {
                return [
                    <Button key="relieve" type="primary" 
                    onClick={async()=>{
                        if (selectList.length === 0) {
                            message.warning('请选择项');
                            return;
                        }
                        await nice(selectList);
                    }}>
                    <MinusOutlined /> 解除禁用
                </Button>,
                <Button key="prohibit" type="primary" danger
                onClick={async ()=>{
                    if (selectList.length === 0) {
                        message.warning('请选择项');
                        return;
                    }
                    await bad(selectList);
                }}>
                <MinusOutlined /> 禁用账户
            </Button>
                ];
            }}
            actionRef={tableIns}
            rowKey="nickName"
            rowSelection={{
                onChange: (selectedIds,selectedRows) =>{
                    selectedRows= selectedRows.map(item=>{
                        return item.userId
                    })
                    
                    console.log(selectedRows);
                    setSelectList(selectedRows);
                    
                } 
            }}
        />
        </RightStyle>
    </PageContainer>;
};
export default Member;